<template>
    <el-container class="container">
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <div class="menu-left">
                    <el-menu-item index="0">
                        <img style="width: 100px" src="/images/element-plus-logo.svg" alt="Element logo" />
                    </el-menu-item>
                    <el-menu-item index="1">发布博客</el-menu-item>
                </div>
                <div class="menu-right">
                    <el-switch v-model="isDark" class="theme-switch" inline-prompt :active-icon="Moon"
                            :inactive-icon="Sunny" />
                    <el-dropdown v-if="authStore.is_login">
                        <span class="user-dropdown">
                            <el-avatar :size="32" class="user-avatar">{{ username.charAt(0) }}</el-avatar>
                            {{ username }}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        
                        <template #dropdown>
                            <el-dropdown-menu>
                                <!-- <el-dropdown-item>个人中心</el-dropdown-item> -->
                                <el-dropdown-item @click="onEXit">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-button v-else @click="router.push({ name: 'Login' })">登录</el-button>
                </div>
            </el-menu>
        </el-header>
        <el-main class="main-container">
            <RouterView></RouterView>
        </el-main>
        <el-backtop :right="20" :bottom="20">
      <el-icon :size="20"><ArrowUpBold /></el-icon>
    </el-backtop>
    </el-container>
    
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { useDark, useToggle } from '@vueuse/core'
import { Moon, Sunny } from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { ArrowUpBold } from '@element-plus/icons-vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


const router = useRouter()
// 配置 NProgress
NProgress.configure({ 
    easing: 'ease',  // 动画方式
    speed: 500,      // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.3 // 初始化时的最小百分比
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
    // 开始进度条
    NProgress.start()
    next()
})

// 路由后置守卫
router.afterEach(() => {
    // 结束进度条
    NProgress.done()
})
let authStore = useAuthStore()
let username = ref(authStore.user)
let blogs = ref([])
const activeIndex = ref('0')

const handleSelect = (key) => {
    if (key === '0') {
        router.push({ name: 'home' })
    }
    if (key === '1') {
        router.push({ name: 'blogPublic' })
    }
}

const isDark = useDark({
    selector: 'html',
    attribute: 'class',
    valueDark: 'dark',
    valueLight: 'light',
})
const toggleDark = useToggle(isDark)
const onEXit = () => {
    authStore.clearUserToken()
    router.push({ name: 'Login' })
}
</script>

<style scoped>

.main-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 减小列表项之间的间距 */
    padding: 16px;
    margin: 0 auto;
    width: min(800px, 90%);
}

.el-menu-demo {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.menu-left {
    display: flex;
    align-items: center;
}

.menu-right {
    display: flex;
    align-items: center;
}

.user-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 12px;
    height: 60px;
    font-size: 14px;
}

.user-avatar {
    background-color: #409EFF;
    color: white;
}
.theme-switch {
    margin: 0 20px;
}
:root.dark .user-avatar {
    background-color: var(--el-color-primary-light-3);
}
</style>